<template>
	<view class="modifyphone">
		<form class="form">
			<view class="phone" v-if="change"><input type="text" v-model="phone" placeholder="请输入当前手机号" placeholder-style="fontSize: 30rpx;fontWeight: 400;color: #9DA5A8;" /></view>
			<view class="phone" v-else><input type="text" v-model="newphone" placeholder="请输入新手机号" placeholder-style="fontSize: 30rpx;fontWeight: 400;color: #9DA5A8;" /></view>
			<view class="codeNum">
				<input v-if="change" class="codeNum" type="text" v-model="codeNum" placeholder="请输入验证码" placeholder-style="fontSize: 30rpx;fontWeight: 400;color: #9DA5A8;" />
				<input v-else class="codeNum" type="text" v-model="newcode" placeholder="请输入验证码" placeholder-style="fontSize: 30rpx;fontWeight: 400;color: #9DA5A8;" />
				<button v-if="change" class="button" type="default" @click="code">{{ code1 == 0 ? time : '发送' }}</button>
				<button v-else class="button" type="default" @click="Newcode">{{ code1 == 0 ? newtime : '发送' }}</button>
			</view>
			<view class="Button"><button type="warn" @click="handlePasswordLoginSubmit">{{change?'下一步':'确认更改'}}</button></view>
		</form>
	</view>
</template>

<script>
	import md5 from '@/common/api/md5.js'
	import {requestUrl} from '@/common/config.js'
	export default {
		data() {
			return {
				phone:'',
				newphone:'',
				codeNum:'',
				newcode:'',
				change:true,
				time:60,
				newtime:60,
				code1:1,
				access_token:'',
			};
		},
		methods:{
			code() {
				let _this = this;
				let time = Math.round(new Date().getTime() / 1000).toString();
				let Time = ['time', time].join('=');
				let Access_token = ['access_token', 'de8af75851bbe8bdbb1676db67418985b556f37d'].join('=');
				let content = ['content=pinet.FeiMao.2017'].join();
				let arr1 = [content, Time].sort(function(a, b) {
					a - b;
				});
				let newarr = md5(arr1.join('&'));
					if(this.code1==1){
						uni.request({
							url: requestUrl+'/app/user/sendcode',
							method: 'GET',
							data: {
								time: time,
								phone: this.phone,
								type: '1',
								sign: newarr
							},
							success: function(res) {
								uni.showToast({
									title:res.data.message,
									icon:'none'
								})
								if (res.data.errcode == 0) {
									_this.code1 = 0;
									let Time=setInterval(function(){
										_this.time=_this.time-1
										if(_this.time==0){
											clearInterval(Time)
											_this.time=60
											_this.code1 = 1;
										}
									},1000)
								}
							}
						});
					}else{
						uni.showToast({
							title:'操作频繁',
							icon:'none'
						})
					}
			},
			Newcode(){
				let _this = this;
				let time = Math.round(new Date().getTime() / 1000).toString();
				let Time = ['time', time].join('=');
				let Access_token = ['access_token', 'de8af75851bbe8bdbb1676db67418985b556f37d'].join('=');
				let content = ['content=pinet.FeiMao.2017'].join();
				let arr1 = [content, Time].sort(function(a, b) {
					a - b;
				});
				let newarr = md5(arr1.join('&'));
					if(this.code1==1){
						uni.request({
							url: requestUrl+'/app/user/sendcode',
							method: 'GET',
							data: {
								time: time,
								phone: this.newphone,
								type: '1',
								sign: newarr
							},
							success: function(res) {
								uni.showToast({
									title:res.data.message,
									icon:'none'
								})
								if (res.data.errcode == 0) {
									_this.code1 = 0;
									let Time=setInterval(function(){
										_this.newtime=_this.newtime-1
										if(_this.newtime==0){
											clearInterval(Time)
											_this.newtime=60
											_this.code1 = 1;
										}
									},1000)
								}
							}
						});
					}else{
						uni.showToast({
							title:'操作频繁',
							icon:'none'
						})
					}
			},
			handlePasswordLoginSubmit(){
				if (!this.phone) {
					return uni.showToast({
						title: '请输入当前手机号',
						icon:'none'
					});
				}
				if (!this.codeNum) {
					return uni.showToast({
						title: '请输入验证码',
						icon:'none'
					});
				}
				if(this.change){
					this.change=false
					this.code1=1
				}else{
					if (!this.newphone) {
						return uni.showToast({
							title: '请输入新手机号',
							icon:'none'
						});
					}
					if (!this.newcode) {
						return uni.showToast({
							title: '请输入验证码',
							icon:'none'
						});
					}
					let _this = this;
					let time = Math.round(new Date().getTime() / 1000).toString();
					let Time = ['time', time].join('=');
					this.access_token=JSON.parse(uni.getStorageSync('access_token'))
					let Access_token = ['access_token', 'de8af75851bbe8bdbb1676db67418985b556f37d'].join('=');
					let content = ['content=pinet.FeiMao.2017'].join();
					let arr1 = [content, Time].sort(function(a, b) {
						a - b;
					});
					let newarr = md5(arr1.join('&'));
							uni.request({
								url: requestUrl+'/app/user/changePhone',
								method: 'GET',
								data: {
									time: time,
									sign: newarr,
									access_token:JSON.parse(uni.getStorageSync('access_token')),
									newphone: this.newphone,
									newcode:this.newcode,
									phone:this.phone,
									code:this.code									
								},
								success: function(res) {
									uni.showToast({
										title:res.data.message,
										icon:'none'
									})
									if (res.data.errcode == 0) {
										_this.code1 = 0;
									}
								}
							});
					this.change=true
					this.code1=0
				}
			}
		}
	}
</script>

<style lang="less">
	.modifyphone{
		padding-top: 40rpx;
		.form {
			.agreement {
				padding-top: 80rpx;
				width: 400rpx;
				margin: 0 auto;
				margin-bottom: 60rpx;
				.text {
					font-size: 20rpx;
					font-weight: 400;
					color: #9da5a8;
					text {
						color: #00609b;
					}
				}
			}
			.phone {
				width: 90%;
				margin: 0 auto;
				border-bottom: 1px solid #f5f5f5;
				height: 100rpx;
				background: url(@/static/Login_phone@2x.png) no-repeat 6rpx 30rpx;
				background-size: 36rpx 42rpx;
				display: flex;
				align-items: center;
				input {
					padding-left: 60rpx;
					box-sizing: border-box;
				}
			}
			.codeNum {
				width: 90%;
				margin: 0 auto;
				border-bottom: 1px solid #f5f5f5;
				display: flex;
				align-items: center;
				background: url(@/static/Login_code@2x.png) no-repeat 6rpx 30rpx;
				background-size: 36rpx 42rpx;
				input {
					flex: 1;
					height: 100rpx;
					padding-left: 60rpx;
					box-sizing: border-box;
				}
				.button {
					width: 160rpx;
					height: 60rpx;
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #DB1B22;
					line-height: 60rpx;
					border-radius: 15px;
					border: 1px solid #DB1B22;
				}
			}
			.Button {
				padding-top: 40rpx;
				width: 90%;
				margin: 0 auto;
				button{
					border-radius: 20px;
				}
			}
		}
	}
</style>
